<template>
  <div class="order_list components_init">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfix_text">操作</span>
        <span>
          <el-button style="float: right" type="primary" @click="handleSearch">搜索</el-button>
          <el-button
            style="float: right; margin-right: 10px"
            type="primary"
            @click="resetSearch"
          >重置</el-button>
          <el-button style="float: right" type="primary">导出</el-button>
        </span>
      </div>

      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="listQuery.orderNo" placeholder="订单号" />
        </el-form-item>
        <el-form-item label="运单号">
          <el-input v-model="listQuery.freightNo" placeholder="运单号" />
        </el-form-item>
        <el-form-item label="装货单位">
          <el-autocomplete
            v-model="listQuery.loadCompany"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleLoadSelect"
          />
        </el-form-item>
        <el-form-item label="卸货单位">
          <el-autocomplete
            v-model="listQuery.unloadCompany"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入卸货单位"
            @select="handleUnLoadSelect"
          />
          <!-- <el-input v-model="listQuery.user" placeholder="卸货单位" /> -->
        </el-form-item>
        <el-form-item label="运单状态">
          <el-select v-model="listQuery.freightStatus" multiple placeholder="运单状态">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="接单时间">
          <el-date-picker
            v-model="listQuery.user"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="司机姓名">
          <el-input v-model="listQuery.user" placeholder="司机姓名" />
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="listQuery.user" placeholder="车牌号" />
        </el-form-item> -->
      </el-form>
    </el-card>
    <el-card class="box-card table_card">
      <div slot="header" class="clearfix">
        <span class="clearfix_text">
          <el-button
            v-for="(item, index) in tableBtnList"
            :key="index"
            type="text"
            :class="tableBtnIndex === index ? 'pitchUpStatus' : ''"
            @click="tableFiltrate(index)"
          >{{ item }}</el-button>
        </span>
        <span>
          <el-button
            style="float: right; margin-left: 20px"
            type="primary"
          >下载轨迹图</el-button>
          <el-button
            style="float: right; margin-left: 10px"
            type="primary"
            @click="centerDialogVisible = true"
          >批量签收</el-button>
        </span>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectable"
        />
        <!-- <el-table-column type="selection" width="55" />
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">
            <el-link :underline="false" @click="pushDetail(scope.row.date)">{{ scope.row.date }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="address" label="地址" show-overflow-tooltip />
        <el-table-column prop="address" label="操作" show-overflow-tooltip /> -->
        <el-table-column label="订单号" prop="orderNo" min-width="110px" align="center" />
        <el-table-column label="运单号" min-width="110px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type" @click="handleDetail(row.freightNo)">
              {{ row.freightNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="货物名称" prop="goodsName" min-width="110px" align="center" />
        <el-table-column label="装货单位" prop="loadCompany" min-width="110px" align="center" />
        <el-table-column label="装货地" min-width="110px" align="center">
          <template slot-scope="{ row }">
            {{ row.loadAddress }}
          </template>
        </el-table-column>
        <el-table-column label="卸货单位" prop="unloadCompany" min-width="110px" align="center" />
        <el-table-column label="卸货地" min-width="110px" align="center">
          <template slot-scope="{ row }">
            {{ row.unloadAddress }}
          </template>
        </el-table-column>
        <el-table-column label="重量" prop="loadingWeight" min-width="110px" align="center" />
        <el-table-column label="运单金额" prop="totalMoney" min-width="110px" align="center" />
        <el-table-column label="司机姓名" prop="driverName" min-width="110px" align="center" />
        <el-table-column label="车牌号" prop="licenseNo" min-width="110px" align="center" />
        <el-table-column label="手机号" prop="driverPhone" min-width="110px" align="center" />
        <el-table-column label="接单时间" prop="createdTime" min-width="110px" align="center" />
        <el-table-column v-if="checkPermission(['ORG_USER','INDIVIDUAL_USER'])" label="操作">
          <template slot-scope="{row}">
            <span v-if="row.status !== 'CANCEL'&& row.status !=='DONE'">
              <el-button type="text" @click="toDelivery(row.freightNo,row.status)">终结 </el-button>
            </span>
            <span v-if="row.status === 'PENDING'||row.status === 'PROCESSING'||row.status === 'STOP'">
              <!-- <el-button type="text" @click="closeWaybill(row)">取消 </el-button> -->
            </span>
            <span v-if="row.status === 'PENDING' || row.status === 'PROCESSING'">
              <!-- <el-button type="text" @click="$router.push({ name: 'newOrders', 'params': { row }})">查看轨迹</el-button> -->
            </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getWaybillList"
      />
    </el-card>

    <!-- 弹窗 -->
    <el-dialog
      title="批量签收"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>当前勾选了{{ selectionList.length }}个运单，是否确认签收？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getWaybillList, postBatchComplete } from '@/api/tms/waybill'
import { getContantList } from '@/api/tms/contact'
import checkPermission from '@/utils/permission'
import Pagination from '@/components/Pagination'
export default {
  name: 'WaybillList',
  components: { Pagination },
  data() {
    return {
      centerDialogVisible: false,
      // 弹窗标题 根据点击的按钮进行赋值
      listQuery: {
        current: 1,
        size: 20,
        orderNo: '',
        freightNo: '',
        goodsName: '',
        loadCompany: null,
        unloadCompany: null,
        freightStatus: null
      },
      currentPage4: 4,
      tableBtnIndex: 0,
      // 订单状态选择列表
      orderStatusList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 'PENDING',
          label: '待提货'
        },
        {
          value: 'PROCESSING',
          label: '运输中'
        },
        {
          value: 'STOP',
          label: '已送达'
        },
        {
          value: 'DONE',
          label: '已完成'
        },
        {
          value: 'CANCEL',
          label: '已取消'
        }
      ],
      // 表单筛选按钮列表
      tableBtnList: ['全部', '未完成', '已完成', '已取消'],
      listLoading: true,
      tableData: [],
      total: 0,
      selectionList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    checkPermission,
    resetSearch() {
      this.listQuery = {
        current: 1,
        size: 20,
        orderNo: '',
        freightNo: '',
        goodsName: '',
        loadCompany: null,
        unloadCompany: null,
        freightStatus: null
      }
      this.getWaybillList()
    },
    // 搜索
    handleSearch() {
      this.listQuery.current = 1
      this.getWaybillList()
    },
    init() {
      this.getWaybillList()
    },
    selectable(row) {
      if (row.status === 'COMPLETE') {
        return true
      } else {
        return false
      }
    },
    closeWaybill(item) {
      console.log(item)
    },
    handleDetail(freightNo) {
      this.$router.push({ name: 'wayillDetails', query: { freightNo }})
    },
    // 根据装货单位模糊搜索
    async querySearch(queryString, cb) {
      var res = await getContantList({ unit: queryString })
      if (res.length !== 0) {
        res.forEach((item) => {
          item.value = item.unit
        })
      }
      cb(res)
    },
    toDelivery(id, status) {
      this.$router.push({ path: '/dispatchManage/closeOrder?oid=' + id + '&status=' + status })
    },
    handleLoadSelect(item) {
      this.listQuery.loadCompany.push(item)
    },
    handleUnLoadSelect(item) {
      this.listQuery.unloadCompany.push(item)
    },
    getWaybillList() {
      this.listLoading = true
      const data = Object.assign({}, this.listQuery)
      data.loadCompany = data.loadCompany ? [data.loadCompany] : []
      data.unloadCompany = data.unloadCompany ? [data.unloadCompany] : []
      getWaybillList(data).then((res) => {
        this.tableData = res.records
        this.total = res.total
        this.listLoading = false
      })
    },
    tableFiltrate(index) {
      this.tableBtnIndex = index
      if (index === 0) {
        this.listQuery.freightStatus = []
      } else if (index === 1) {
        this.listQuery.freightStatus = ['PENDING', 'PROCESSING', 'COMPLETE']
      } else if (index === 2) {
        this.listQuery.freightStatus = ['DONE']
      } else if (index === 3) {
        this.listQuery.freightStatus = ['CANCEL']
      }
      this.getWaybillList()
    },
    handleSelectionChange(e) {
      const selectionList = []
      e.forEach(item => {
        selectionList.push(item.freightNo)
      })
      this.selectionList = selectionList
    },
    batchBtn() {
      if (this.selectionList.length === 0) return this.$message.warning('请勾选要签收的运单')
      this.centerDialogVisible = true
    },
    pushDetail(id) {
      this.$router.push({ path: '/orderManage/orderDetail' })
    },
    async centerDialogConfirm() {
      try {
        await postBatchComplete({ freightNos: this.selectionList })
        this.$message.success('操作成功')
        this.centerDialogVisible = false
        this.getWaybillList()
      } catch {
        console.log()
      }
    }
  }
}
</script>
<style lang="scss">
.order_list {
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .table_card {
    .el-card__header {
      border: 0;
    }
    .clearfix {
      .clearfix_text {
        button {
          color: #45454b;
          font-weight: 700;
          margin: 0;
          padding: 0 15px;
          border-radius: 0;
        }
        .pitchUpStatus {
          color: #1890ff;
        }
        button:nth-child(n + 2) {
          border-left: 2px solid #45454b;
        }
      }
    }
    .el-card__body {
      padding-top: 0;
    }
  }
  .el-form-item {
    margin-left: 30px;
  }
  .order_list_pagination {
    display: flex;
    justify-content: flex-end;
    width: 98%;
    margin: 20px 0;
  }
}
</style>
